import { useEffect, useState } from 'react';
import Icon,{ DatabaseOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { GetProps, message, Modal, Popover, Select, SelectProps, Switch } from 'antd';
import { AddFolderSvg, AddSvg, AddUserSvg, CheckBoxSvg, CheckedBoxSvg, DefaultModelSvg, DeleteSvg, DownArrowSvg, EditSvg, FileSvg, HistoryTimeSvg, InputSvg, ModelV2Svg, MoreSvg, SettingSvg, SvgQuest, SyncSvg, TextDatasetSvg } from '@/app/assets/CustomizeSvg';
import { useMainContentContext } from '@/service/general/publicStatic';

import './dataset.css'
import { isLoggedIn } from '@/service/axiosManager';
import { UtilHelpers } from '@/service/general/utils/utilHelpers';
import { dict } from '@/service/general/dict';
import { RenameModal } from '../update/RenameModal';
import { AddEmptyDataset } from '../adddata/AddEmptyDataset';
import { AddTextDataset } from '../adddata/createTextDataset/AddTextDataset';
import { DatasetDetail } from './detail/DatasetDetail';
import { DataSetModal, KnowledgeBaseModal } from '@/service/request/modal/dataModal';
import { ResponseModal, ResponsePageModal, ResponseSingleModal } from '@/service/request/modal/responseModal';
import { deleteDataset, getDatasetList, getDatasetModels, updateKnowledgeBase } from '@/service/request/requestApi';
import { CreateDatasetType, ShowType } from '@/service/general/enumType';
import { RequestKnowledgeBase } from '@/service/request/modal/requestModal';
import AddKnowledgeBase from '../adddata/AddKnowledgeBase';

interface TagInfo {
    id: number;
    checked: boolean;
    tagName: string;
    createTime: number;
};

const indexModels:SelectProps["options"] = [{
    value: 'qwen2.5:7b',
    label: <>
            <div key={`model_1`} className="flex flex-row items-center justify-start gap-2">
                <div><DefaultModelSvg color="#08a4f5" /></div>
                <div>qwen2.5:7b</div>
            </div>
        </>,
}];

interface models {
    agentModels: string[],
    vectorModels: string[]
}

export default function DateSet({data}: {data: KnowledgeBaseModal}) {
    const [datasetInfo, setDatasetInfo] = useState<RequestKnowledgeBase>({
        id: null,
        name: "",
        intro: "",
        vectorModel: "",
        agentModel: ""
    });
    const [searchInputFocus, setSearchInputFocus] = useState<boolean>(false);
    const [tagSearchFocus, setTagSearchFocus] = useState<boolean>(false);
    const [showAddTag, setShowAddTag] = useState<boolean>(false);
    const [showRenameModal, setShowRenameModal] = useState<boolean>(false);
    const [showEmptyDataset, setShowEmptyDataset] = useState<boolean>(false);
    const [knowledgeBaseEdit, setKnowledgeBaseEdit] = useState<boolean>(false);

    const [knowledgeBaseEditType, setKnowledgeBaseEditType] = useState<ShowType>(ShowType.UPDATE);

    const [tagSelectPlaceholder, setTagSelectPlaceholder] = useState<string>("标签");
    const [tagValues,setTagValues] = useState<TagInfo[]|null>([]);
    const [viewTagValues, setViewTagValues] = useState<TagInfo[]|null>([]);
    const [showAddTagValue, setShowAddTagValue] = useState<string>('');
    const [dataSet, setDataSet] = useState<DataSetModal[]>([]);
    const [loadData, setLoadData] = useState<boolean>(true);
    const [showTab, setShowTab] = useState<boolean>(true);
    const [agentModels, setAgentModels] = useState<string[]>([]);
    const [vectorModels, setVectorModels] = useState<string[]>([]);
    const [agentModelsShow, setAgentModelsShow] = useState<boolean>(false);
    const [vectorModelsShow, setVectorModelsShow] = useState<boolean>(false);

    const [paramDataItem, setParamDataItem] = useState<DataSetModal>();

    const {to,goBack} = useMainContentContext();
    useEffect(() => {
        Initialize();
        // } else {
        //     setDataSet(null);
        // }
    });

    const Initialize = () => {
        if (isLoggedIn() && loadData) {
            setLoadData(false);
            setDatasetInfo({
                id: data.id,
                name: data.name,
                intro: data.intro,
                vectorModel: data.vectorModel,
                agentModel: data.agentModel
            });
            loadDataSetList();
            loadModels();
        }
    }

    const loadDataSetList = () => {
        if (!data || !data.id) return;
        getDatasetList({id: data.id}).then((res: ResponsePageModal<DataSetModal>) => {
            if (res.success && res.code === 200) {
                setDataSet(res.result?.data || []);
            } else {
                message.error(res.message);
            }
        }).catch((err) => {
            console.log("加载数据集失败:",err);
        })
    }

    const loadModels = () => {
        getDatasetModels().then((res: ResponseSingleModal<models>) => {
            if (res.code === 200 && res.success && res.result) {
                setAgentModels(res.result.agentModels);
                setVectorModels(res.result.vectorModels);
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            }
        }).catch((err) => {
            console.log("获取模型失败");
        });
    }

    const changeDatasetInfo = ({key, value}: {key: string, value: string}) => {
        if (isValidKey(datasetInfo, key)) {
            setDatasetInfo({
                ...datasetInfo,
                [key]: value
            });
        }
    }

    const checkTag = (tag: TagInfo) => {
        console.log(`check tag: \n ${JSON.stringify(tag)}`);
        if (!tag || !viewTagValues || viewTagValues.length <= 0) return;
        updateViewTagValues(viewTagValues.map((item) => {
            if (item.id === tag.id){
                console.log("tag id: " + JSON.stringify(tag));
                item.checked = !item.checked;
            }
            return item;
        }));
    }

    const allUnCheckTag = () => {
        if (!tagValues || tagValues.length <= 0) return;
        updateTagValues(tagValues.map((item) => {
            item.checked = false;
            return item;
        }));
    }

    const updateTagValues = (values: TagInfo[] | null) => {
        setTagValues(values);
        updateViewTagValues(values);
    }

    const updateViewTagValues = (values: TagInfo[] | null = null) => {
        if (!values || values.length <= 0) {
            // setViewTagValues(tagValues ? tagValues.sort((last, next) => {
            //     if (last.checked == next.checked) {
            //         const sort = last.createTime - next.createTime;
            //         if (sort === 0) {
            //             return last.tagName.localeCompare(next.tagName);
            //         }
            //         return sort;
            //     }
            //     return last.checked ? -1 : 1;
            // }):tagValues);
            setViewTagValues(values);
            return;
        }
        setViewTagValues(values.sort((last, next) => {
            if (last.checked === next.checked) {
                const sort = last.createTime - next.createTime;
                if (sort === 0) {
                    return last.tagName.localeCompare(next.tagName);
                }
                return sort;
            }
            return last.checked ? -1 : 1;
        }));

        if (tagValues && tagValues.length > 0) {
            const checkedCount = tagValues.filter((tagitem) => tagitem.checked).length
            if (checkedCount > 0) {
                setTagSelectPlaceholder(`标签(${checkedCount})`);
            } else {
                setTagSelectPlaceholder("标签")
            }
        }
    }

    const addTagValue = () => {
        if (!showAddTag || !showAddTagValue || showAddTagValue.length <= 0) return;
        if ((tagValues ? tagValues.filter(item => item.tagName === showAddTagValue).length : 0) > 0) return;
        let item: TagInfo = {
            id: 1,
            checked: false,
            tagName: showAddTagValue,
            createTime: Date.now(),
        }
        let addTagValues = [item];
        if (tagValues) {
            const id = Math.max(...tagValues.map(item => item.id), 1) + 1;
            item.id = id;
            addTagValues = [...tagValues,item];
        }
        setShowAddTagValue('');
        setShowAddTag(false);
        updateTagValues(addTagValues);
    }

    const searchAndAddTag = (value: string) => {
        setShowAddTagValue(value);
        if (!value || value.length <= 0) {
            setShowAddTag(false);
            updateViewTagValues(tagValues);
            return;
        }
        const searchTags = tagValues ? tagValues.filter(item => item.tagName.indexOf(value) >= 0):[];
        if (searchTags.length !== 1 || searchTags[0].tagName !== value) {
            setShowAddTag(true);
        } else {
            setShowAddTag(false);
        }
        let viewTags = tagValues ? tagValues.filter(item => item.checked):[];
        viewTags = [...viewTags, ...searchTags].filter((item,index,self) => index === self.findIndex(t => t.id === item.id));
        updateViewTagValues(viewTags);
    }

    const toItemDetail = (item: DataSetModal) => {
        const detail = <DatasetDetail knowledgeBase={data} dataSetItem={item} />
        to(detail);
    }

    const renameDatesetItem = (item: DataSetModal) => {
        setParamDataItem(item);
        setShowRenameModal(true);
    }

    const isValidKey = <T extends Object>(obj: T, key: string | number | symbol): key is keyof T => {
        return Object.prototype.hasOwnProperty.call(obj, key);
    }

    const updateKnowledgeInfo = ({key, value}: {key: string, value: string}) => {
        if (isValidKey(data, key)) {
            const param: RequestKnowledgeBase = {
                ...datasetInfo,
                [key]: value
            }
            updateKnowledgeBase(param).then((res: ResponseModal<boolean>) => {
                if (res.code === 200 && res.success && res.result) {
                    message.success("修改成功");
                    changeDatasetInfo({key, value});
                } else if (res.message && res.message.length > 0) {
                    message.error(res.message);
                } else {
                    message.error("修改失败");
                }
            }).catch((err) => {
                console.log();
            });
        }
    }

    

    const deleteDatesetItem = (item: DataSetModal) => {
        if (!item || !item._id) {
            message.error("id不能为空");
            return;
        }
        const param = {
            id: item._id
        }
        deleteDataset(param).then((res: ResponsePageModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("删除成功");
                loadDataSetList();
            }
        }).catch((err) => {
            console.log("删除失败", err);
        });
    }

    const toAddDataset = (type: CreateDatasetType) => {
        const textDataset = <AddTextDataset data={data} type={type} />;
        to(textDataset);
    }

    const hidePopover = () => {
        setVectorModelsShow(false);
        setAgentModelsShow(false);
    }

    return (
        <>
        <div className="data-detail-modal">
            <div className='h-full w-full bg-transparent grid grid-rows-1 grid-cols-[4fr,1fr] gap-2'>
                <div className="detail-view h-full bg-white rounded-lg border-gray-400 shadow-sm">
                    <div className="w-full h-8 border-b flex flex-row px-6 py-8">
                        <div className="flex flex-row items-center justify-start gap-3">
                            <div className="hover:bg-[#F0F0F0] p-1 rounded-lg cursor-pointer" onClick={() => {goBack()}}>根目录</div>
                            <div className="cursor-default">/</div>
                            <div className="font-[600] cursor-default">{datasetInfo.name}</div>
                        </div>
                        <div className='mx-auto flex flex-row items-center justify-center'>
                            <div 
                            className="hover:bg-[#F0F0F0] p-2 rounded-lg"
                            style={{
                                color: showTab ? "#2B5FD9" : "#000",
                                cursor: showTab ? "default" : "pointer",
                            }}
                            onClick={() => {if(!showTab) setShowTab(true);}}
                            >数据集</div>
                            <div 
                            className="hover:bg-[#F0F0F0] p-2 rounded-lg"
                            style={{
                                color: !showTab ? "#2B5FD9" : "#000",
                                cursor: !showTab ? "default" : "pointer",
                            }}
                            onClick={() => {if(showTab) setShowTab(false);}}
                            >搜索测试</div>
                        </div>
                    </div>
                    <div className="p-6 flex flex-col" style={{height: "calc(100% - 4.6em)"}}>
                        { showTab ? (
                            <>
                            <div className="flex flex-row items-center justify-between">
                                <div className="flex flex-row items-center justify-start text-base">
                                    <div className="mr-3">
                                        <FileSvg color="#747D82" />
                                    </div>
                                    <div>文件({String(data).length})</div>
                                </div>
                                <div className="flex flex-row items-center justify-center gap-2">
                                    <div
                                    style={searchInputFocus ? {
                                        borderColor: "rgba(13, 110, 253, 0.6)",
                                        boxShadow: "0 0 5px rgba(13,110,253, 0.4)",
                                    }: {}}
                                    className="w-52 flex flex-row items-center justify-center gap-[1px] border-[1px] border-gray-300 rounded-lg p-2 hover:border-[#0D6EFD]/60">
                                        <div className="flex flex-row items-center justify-center"><SearchOutlined className="icon-search" /></div>
                                        <div className="h-full w-auto flex flex-row items-center justify-center">
                                            <input 
                                            type="text" 
                                            placeholder="搜索" 
                                            className="w-full h-full border-none outline-none"
                                            onBlur={() => {setSearchInputFocus(false);}}
                                            onFocus={() => {setSearchInputFocus(true);}}
                                             />
                                        </div>
                                    </div>
                                    <Popover content={
                                            <div>
                                                <div className="px-2 pt-1">
                                                    <div 
                                                    style={tagSearchFocus ? {
                                                        borderColor: "rgba(13, 110, 253, 0.6)",
                                                        boxShadow: "0 0 5px rgba(13,110,253, 0.4)",
                                                    }:{}}
                                                    className="border border-gray-200 py-1 px-2 rounded hover:border-[#0D6EFD]/60">
                                                        <input 
                                                        value={showAddTagValue}
                                                        type="text" 
                                                        placeholder="搜索或添加标签" 
                                                        className="w-full h-full border-none outline-none"
                                                        onBlur={() => {setTagSearchFocus(false);}}
                                                        onFocus={() => {setTagSearchFocus(true);}}
                                                        onChange={(e) => {searchAndAddTag(e.target.value);}}
                                                        />
                                                    </div>
                                                    {showAddTag ? (
                                                    <div 
                                                    className="flex flex-row items-center justify-start p-2 my-1 hover:bg-gray-100 rounded-lg cursor-pointer"
                                                    onClick={() => {addTagValue();}}
                                                    >
                                                        <div className="flex flex-row items-center justify-center text-xs">
                                                            <AddSvg color="#221714" />
                                                        </div>
                                                        <div className="ml-2">创建"{showAddTagValue}"</div>
                                                    </div>
                                                    ):(<></>)}
                                                </div>
                                                <div className="tags-list px-2 py-1 mb-1 max-h-[248px] overflow-y-auto">
                                                    {viewTagValues && viewTagValues.map((item,index) => (
                                                        <div 
                                                        key={"tag_" + item.id} 
                                                        className="w-full flex flex-row items-center justify-start px-2 hover:bg-gray-100 rounded-lg cursor-pointer my-0.5"
                                                        onClick={() => {checkTag(item);}}
                                                        >
                                                            <div className="w-4 flex flex-row items-center justify-center">
                                                                <div 
                                                                style={item.checked ? {
                                                                    borderColor: "rgba(13, 110, 253, 0.6)",
                                                                    boxShadow: "0 0 5px rgba(13,110,253, 0.4)",
                                                                }:{}}
                                                                className="w-full h-fit">
                                                                {item.checked ? (<CheckedBoxSvg color="#0D6EFD" />) : (<CheckBoxSvg color="#8a8a8a" />)}
                                                                </div>
                                                            </div>
                                                            <div className="ml-2">{item.tagName}</div>
                                                        </div>
                                                        ))}
                                                </div>
                                                <div className="flex flex-row text-center cursor-pointer">
                                                    <div 
                                                    className="w-1/2 border-t border-gray-300 rounded-bl-lg py-2 hover:bg-gray-100 hover:text-[#0D6EFD]"
                                                    onClick={() => {allUnCheckTag();}}
                                                    >取消选择</div>
                                                    <div className="w-1/2 border-t border-l border-gray-300 rounded-br-lg py-2 hover:bg-gray-100 hover:text-[#0D6EFD]">标签管理</div>
                                                </div>
                                            </div>
                                        } arrow={false} trigger="click" placement="bottomRight" overlayInnerStyle={{width: "13rem",padding: 0,margin: 0}}>
                                        <div className="detail-search-input w-52 flex flex-row items-center justify-between border-[1px] border-gray-300 rounded-lg p-2 hidden">
                                            <div>
                                                <div className="text-gray-400">{tagSelectPlaceholder}</div>
                                            </div>
                                            <div className="flex flex-row items-center justify-center">
                                                <div><DownArrowSvg color="#979797" /></div>
                                            </div>
                                        </div>
                                    </Popover>

                                    <Popover
                                    content={
                                        <div className="p-2 rounded-lg flex flex-col items-center justify-center gap-2">
                                            <div className="w-full flex flex-row items-center justify-start gap-2 px-4 py-2 rounded-lg border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-[#2B5FD9]" onClick={() => {setShowEmptyDataset(true)}}>
                                                <div className="flex flex-row items-center justify-center"><InputSvg /> </div>
                                                <div className="text-left">手动数据集</div>
                                            </div>
                                            <div className="w-full flex flex-row items-center justify-start gap-2 px-4 py-2 rounded-lg border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-[#2B5FD9]" onClick={() => {toAddDataset(CreateDatasetType.TEXT)}}>
                                                <div className="flex flex-row items-center justify-center"><TextDatasetSvg /></div>
                                                <div className="text-left">文本数据集</div>
                                            </div>
                                            <div className="w-full flex flex-row items-center justify-start gap-2 px-4 py-2 rounded-lg border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-[#2B5FD9]" onClick={() => {toAddDataset(CreateDatasetType.FILE)}}>
                                                <div className="flex flex-row items-center justify-center"><TextDatasetSvg /></div>
                                                <div className="text-left">文件数据集</div>
                                            </div>
                                            <div className="w-full flex flex-row items-center justify-start gap-2 px-4 py-2 rounded-lg border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-[#2B5FD9]" onClick={() => {toAddDataset(CreateDatasetType.URLLINK)}}>
                                                <div className="flex flex-row items-center justify-center"><TextDatasetSvg /></div>
                                                <div className="text-left">网页链接数据集</div>
                                            </div>
                                        </div>
                                    }
                                    arrow={false} trigger="hover" placement="bottomLeft" overlayInnerStyle={{padding: 0,margin: 0}}>
                                        <div className="flex flex-row items-center justify-center bg-[#0D6EFD] text-white rounded-lg py-2 px-4 gap-2">
                                            <div className="flex flex-row items-center justify-center"><AddFolderSvg color="#FFFFFF" /></div>
                                            <div>新建/导入</div>
                                        </div>
                                    </Popover>
                                </div>
                            </div>
                            <div key={`table_dataset`} className="dataset-list w-full h-full mt-3 overflow-y-auto">
                                <div key={`table_dataset_title`} className="w-full flex flex-row items-center justify-between text-left bg-gray-200 rounded-lg px-6 py-4 font-bold mb-2">
                                    <div className="flex-[5]">名称</div>
                                    <div className="flex-[4]">训练模式</div>
                                    <div className="flex-[4]">数据总量</div>
                                    <div className="flex-[5]">创建/更新时间</div>
                                    {/* <div className="flex-[4]">状态</div> */}
                                    <div className="flex-[2] hidden">启用</div>
                                    <div className='flex-[3]'></div>
                                </div>
                                {
                                    dataSet && dataSet.length > 0 ? dataSet.map((item,index) => {
                                        return (
                                        <>
                                            <div key={`dataset_item${index}_${item.tmbId}`} 
                                            className="w-full flex flex-row gap-1 items-center text-left justify-between px-6 py-4 border-b border-b-gray-400/40 hover:bg-gray-100 hover:rounded-lg cursor-pointer"
                                            onClick={() => toItemDetail(item)}
                                            >
                                                <div className="flex-[5]">{item.name}</div>
                                                <div className="flex-[4]">{dict.TrainingType[item.trainingType || "-"]}</div>
                                                <div className="flex-[4]">{item.dataAmount || "-"}</div>
                                                <div className="flex-[5] text-xs">
                                                    <div>{UtilHelpers.dateFormat(item.createTime, 'YYYY-MM-DD HH:mm') || "-"}</div>
                                                    <div>{UtilHelpers.dateFormat(item.updateTime || item.createTime, 'YYYY-MM-DD HH:mm')}</div>
                                                </div>
                                                {/* <div className="flex-[4]">-</div> */}
                                                <div className="flex-[2] hidden">
                                                    <Switch disabled value={!item.forbid} size="small" />
                                                </div>
                                                <div className='flex-[3] flex flex-row items-center justify-center'>
                                                    <Popover content={
                                                        <>
                                                        <div className="flex flex-col gap-2 p-2 cursor-pointer">
                                                            <div 
                                                            className="w-full flex flex-row items-center justify-start rounded-md border border-transparent hover:bg-gray-200 px-4 py-2 gap-2"
                                                            onClick={(event) => {event.stopPropagation();renameDatesetItem(item);}}
                                                            >
                                                                <div className="w-4"><EditSvg width={`100%`} height={`100%`} /></div>
                                                                <div>重命名</div>
                                                            </div>
                                                            <div className="border-b border-gray-200"></div>
                                                            <div 
                                                            className="w-full flex flex-row items-center justify-start rounded-md border border-transparent hover:bg-red-600/10 px-4 py-2 gap-2 text-red-600"
                                                            onClick={(event) => {event.stopPropagation();deleteDatesetItem(item);}}
                                                            >
                                                                <div className="w-4"><DeleteSvg width={`100%`} height={`100%`} /></div>
                                                                <div>删除</div>
                                                            </div>
                                                        </div>
                                                        </>
                                                        } 
                                                        arrow={false} 
                                                        trigger="hover" 
                                                        placement="bottomRight" 
                                                        overlayInnerStyle={{padding: 0,margin: 0}}
                                                        getPopupContainer={(node) => node}
                                                        >
                                                        <div className="w-8 h-8 flex flex-row items-center justify-center group/more">
                                                            <div className="w-5 cursor-pointer transition-all duration-300 text-gray-400 group-hover/more:w-8 group-hover/more:text-blue-400">
                                                                <MoreSvg width={`100%`} height={`100%`} />
                                                            </div>
                                                        </div>
                                                    </Popover>
                                                </div>
                                            </div>
                                        </>
                                        );}):(<></>)
                                }
                            </div>
                            </>
                        ) : (
                            <>
                                <div className="dataset-list w-full h-full flex flex-row items-start justify-center gap-8 overflow-y-auto">
                                    <div className="flex-1 flex flex-col items-start justify-center gap-5">
                                        <div className="">
                                            <div 
                                            className="flex flex-col items-start justify-center gap-2 w-[450px] py-2 px-4 rounded-lg border bg-white shadow-[0_0_8px_rgb(96,165,250,0.1)] shadow-transparent border-blue-400 has-[textarea:focus-within]:border-blue-400 has-[textarea:focus-within]:shadow-blue-400">
                                                <div className="w-full flex flex-row items-center justify-between p-1">
                                                    <div className="flex flex-row items-center justify-between gap-1 border border-gray-200 rounded-lg px-3 py-1 shadow shadow-gray-200 cursor-pointer hover:border-blue-400 active:shadow-blue-200">
                                                        <div className="w-4 flex flex-row items-center justify-center text-blue-500"><TextDatasetSvg width={`100%`} height={`100%`} /></div>
                                                        <div>单个文本测试</div>
                                                        <div className="w-5 flex flex-row items-center justify-center"><DownArrowSvg width={`100%`} height={`100%`} /></div>
                                                    </div>
                                                    <div className="flex flex-row items-center justify-between gap-2 border border-gray-200 rounded-lg px-3 py-1 shadow shadow-gray-200 cursor-pointer">
                                                        <div>1</div>
                                                        <div>语义检索</div>
                                                    </div>
                                                </div>
                                                <div className="w-full h-fit">
                                                    <textarea name="testText" placeholder="输入需要测试的文本" className="input-textarea border-none outline-none w-full bg-transparent resize-none h-48"></textarea>
                                                </div>
                                                <div className="w-full flex flex-row items-center justify-end pb-2">
                                                    <div className="w-fit bg-blue-500 text-white rounded-lg px-3 py-1 cursor-pointer hover:bg-blue-500/90">测试</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="w-full flex flex-col items-start justify-center gap-2">
                                            <div className="w-full flex flex-row items-center justify-start gap-2">
                                                <div className="w-4 flex flex-row items-center justify-center"><HistoryTimeSvg width={`100%`} height={`100%`} /></div>
                                                <div className="text-base">测试历史</div>
                                            </div>
                                            <div className="w-full flex flex-col items-start justify-center">
                                                <div className="w-full hidden flex-row items-center justify-between px-4 py-2 rounded-lg border border-gray-300 cursor-pointer hover:border-blue-400">
                                                    <div className="w-fit flex flex-row items-center justify-start gap-2">
                                                        <div className="flex flex-row items-center justify-start">
                                                            <div>2</div>
                                                            <div>语义检索</div>
                                                        </div>
                                                        <div>321231</div>
                                                    </div>
                                                    <div className="text-gray-500">13:10</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="flex-[4]">
                                        <div className="hidden">测试参数</div>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </div>
                <div className="detail-info-view h-full bg-white rounded-lg border-gray-400 shadow-sm p-6 overflow-hidden">
                    <div className="flex flex-col items-start justify-start gap-2">
                        <div className="flex flex-row items-center justify-start gap-2 w-full">
                            <div className="flex flex-row items-center justify-center text-[#2B5FD9]"><DatabaseOutlined className="w-4" /></div>
                            <div className="text-base font-semibold">{datasetInfo.name}</div>
                            <div className="cursor-pointer" onClick={() => setKnowledgeBaseEdit(true)}><EditSvg /></div>
                        </div>
                        <div className="flex flex-row items-center justify-start gap-1 text-zinc-600 text-sm w-fit bg-[#F0F0F0] rounded-md px-4 py-2">
                            <div className="flex flex-row items-center justify-center"><DatabaseOutlined className="w-[14px]" /></div>
                            <div>通用知识库</div>
                        </div>
                        <div className="text-sm text-[#666666] py-1 mb-1">{datasetInfo.intro || "这个知识库还没有介绍~"}</div>
                    </div>
                    <div className="w-full border-b border-gray-300"></div>
                    <div className="mt-4">
                        <div className="flex flex-col items-start justify-center gap-2 text-xs leading-3">
                            <div>知识库id</div>
                            <div className="text-[#666666]">{datasetInfo.id}</div>
                        </div>
                    </div>
                    <div className="mt-4">
                        <div className='flex flex-row items-center justify-between'>
                            <div className="flex flex-row items-center justify-between py-2">
                                <div className="text-base">索引模型：</div>
                                <div className="text-xs text-center text-gray-400"></div>
                            </div>
                            <div>
                               <div className="w-full index-model-select model-select">
                                    {/* <Popover 
                                    content={
                                        <>
                                            <div className="scrollbar-style w-full max-h-60 h-fit px-2 py-2 rounded-lg overflow-y-auto">
                                                <div className="w-full h-fit flex flex-col items-center justify-center gap-2">
                                                    {
                                                        vectorModels.map((item, index) => (
                                                            <>
                                                                <div 
                                                                key={`vectorModel_select_${index}`}
                                                                className="w-full h-fit flex flex-row items-center justify-start cursor-pointer p-2 rounded-lg hover:bg-gray-200"
                                                                onClick={() => {updateKnowledgeInfo({key: "vectorModel", value: item});setVectorModelsShow(false);}}
                                                                >
                                                                    <div className="w-5 flex flex-row items-center justify-center text-blue-400">
                                                                        <ModelV2Svg width={`100%`} height={`100%`} />
                                                                    </div>
                                                                    <div>{item}</div>
                                                                </div>
                                                            </>
                                                        ))
                                                    }
                                                </div>
                                            </div>
                                        </>
                                    } 
                                    arrow={false} 
                                    open={vectorModelsShow}
                                    placement="bottom"
                                    overlayInnerStyle={{margin: 0,padding: 0}}
                                    overlayStyle={{width: "100%"}}
                                    getPopupContainer={(node) => node}
                                    > */}
                                        <div 
                                        // className="w-full relative flex flex-row items-center justify-between cursor-pointer shadow-[0_0_5px] shadow-transparent border border-gray-300 rounded-lg py-2 px-4 hover:border-blue-300 hover:shadow-blue-300" 
                                        className="w-full relative flex flex-row items-center justify-end cursor-pointer shadow-[0_0_5px] shadow-transparent py-2 px-4"
                                        // onClick={(event) => {
                                        //     event.stopPropagation();
                                        //     hidePopover();
                                        //     setVectorModelsShow(!vectorModelsShow);
                                        //     }}
                                            >
                                            <div className="flex flex-row items-center justify-center gap-2">
                                                <div className="w-5 flex flex-row items-center justify-center text-blue-400">
                                                    <ModelV2Svg width={`100%`} height={`100%`} />
                                                </div>
                                                <div>{datasetInfo.vectorModel || vectorModels[0]}</div>
                                            </div>
                                            <div className="w-5 hidden flex-row items-center justify-center text-gray-400">
                                                <DownArrowSvg width={`100%`} height={`100%`} />
                                            </div>
                                        </div>
                                    {/* </Popover> */}
                                </div>
                            </div>
                        </div>
                        <div className="mt-3 flex flex-row items-center justify-between">
                            <div className="flex flex-row items-center justify-between py-2">
                                <div>文本理解模型：</div>
                                <div></div>
                            </div>
                            <div>
                                <div className="flex-[2] w-full text-model-select model-select">
                                    {/* <Popover
                                    content={
                                        <>
                                            <div className="scrollbar-style w-full max-h-60 h-fit px-2 py-2 rounded-lg overflow-y-auto">
                                                <div className="w-full h-fit flex flex-col items-center justify-center gap-2">
                                                    {
                                                        agentModels.map((item, index) => (
                                                            <>
                                                                <div 
                                                                key={`vectorModel_select_${index}`}
                                                                className="w-full h-fit flex flex-row items-center justify-start cursor-pointer p-2 rounded-lg hover:bg-gray-200"
                                                                onClick={() => {updateKnowledgeInfo({key: "agentModel", value: item});setAgentModelsShow(false);}}
                                                                >
                                                                    <div className="w-5 flex flex-row items-center justify-center text-blue-400">
                                                                        <ModelV2Svg width={`100%`} height={`100%`} />
                                                                    </div>
                                                                    <div>{item}</div>
                                                                </div>
                                                            </>
                                                        ))
                                                    }
                                                </div>
                                            </div>
                                        </>
                                    } 
                                    arrow={false} 
                                    open={agentModelsShow}
                                    placement="bottom"
                                    overlayInnerStyle={{margin: 0,padding: 0}}
                                    overlayStyle={{width: "100%"}}
                                    getPopupContainer={(node) => node}
                                    > */}
                                        <div 
                                        // className="w-full relative flex flex-row items-center justify-between cursor-pointer shadow-[0_0_5px] shadow-transparent border border-gray-300 rounded-lg py-2 px-4 hover:border-blue-300 hover:shadow-blue-300"
                                        className="w-full relative flex flex-row items-center justify-end cursor-pointer shadow-[0_0_5px] shadow-transparent py-2 px-4"
                                        // onClick={(event) => {
                                        //     event.stopPropagation();
                                        //     hidePopover();
                                        //     setAgentModelsShow(!agentModelsShow);
                                        //     }}
                                        >
                                            <div className="flex flex-row items-center justify-center gap-2">
                                                <div className="w-5 flex flex-row items-center justify-center text-blue-400">
                                                    <ModelV2Svg width={`100%`} height={`100%`} />
                                                </div>
                                                <div>{datasetInfo.agentModel || agentModels[0]}</div>
                                            </div>
                                            <div className="w-5 hidden flex-row items-center justify-center text-gray-400">
                                                <DownArrowSvg width={`100%`} height={`100%`} />
                                            </div>
                                        </div>
                                    {/* </Popover> */}
                                </div>
                            </div>
                        </div>
                        {/* <div className="flex flex-row items-center justify-between w-full py-2">
                            <div className="flex flex-row items-center justify-start gap-2">
                                <div>定时同步</div>
                                <Popover content={
                                    <>
                                        <div className="min-w-24 max-w-52">开启定时同步后，系统将会每天不定时尝试同步集合，集合同步期间，会出现无法搜索到该集合数据现象。</div>
                                    </>
                                } trigger="hover" placement="bottom">
                                    <div className="flex flex-row items-center justify-center"><SvgQuest color="#575B66"/></div>
                                </Popover>
                                
                            </div>
                            <div>
                                <Switch size="small" style={{height: "18px"}} /> 
                                <div className="flex flex-row items-center justify-center h-5 w-10 rounded-2xl" style={{
                                    justifyContent: "flex-end",
                                    backgroundColor: "#000",
                                }}>
                                    <div className="h-[99%] my-auto rounded-full aspect-square bg-white"></div>
                                </div>
                            </div>
                        </div> */}
                    </div>
                    <div className="w-full hidden border-b border-gray-300 my-5"></div>
                    <div className="hidden flex-col gap-4 items-center justify-center">
                        <div className="w-full flex flex-row items-center justify-between">
                            <div className="font-bold text-xs">协作者</div>
                            <div className="flex flex-row items-center justify-center text-gray-700 gap-1">
                                <div className="flex flex-row items-center justify-center cursor-pointer"><SettingSvg width={22} height={22} /></div>
                                <div className="flex flex-row items-center justify-center cursor-pointer"><AddUserSvg width={16} height={16} /></div>
                            </div>
                        </div>
                        <div className="flex flex-row items-center justify-center w-full bg-gray-100 rounded-lg py-4 cursor-default">
                            <div className="text-gray-600 select-none">暂无协作者</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <RenameModal open={showRenameModal} setOpen={setShowRenameModal} data={paramDataItem} callback={loadDataSetList} />
        <AddEmptyDataset open={showEmptyDataset} data={data} setOpen={setShowEmptyDataset} callback={loadDataSetList} />
        <AddKnowledgeBase open={knowledgeBaseEdit} setOpen={setKnowledgeBaseEdit} showType={knowledgeBaseEditType} data={datasetInfo} callback={setDatasetInfo} />
        </>
    );
}